<template>
    <div v-loading="listLoading" class="body">
        <TitleTips title="清单变更记录" style="margin-bottom: 0;" />
        <BasePage :show-shadow="false">
            <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
                <el-form-item label="变更类型">
                    <el-select v-model="form.type" clearable placeholder="请选择" style="width: 160px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <BaseButton @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="handleReset">重置</BaseButton>
                </el-form-item>
            </el-form>
            <BaseTable slot="table" ref="table" :columns="columns" :data="list" style="margin-bottom: 24px;" @sort-change="handleSortChange">
                <template #handle="{ scope: { row } }">
                    <BaseButton type="text" @click="handleDetail(row.type, row.id)"> 查看详情 </BaseButton>
                </template>
            </BaseTable>
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </BasePage>
    </div>
</template>

<script>
import BasePage from '@/layouts/BasePage'

import { ContractPriceModel } from '@/models'

export default {
    name: 'ChangeRecord',
    components: {
        BasePage,
    },
    data() {
        return {
            model: new ContractPriceModel(),
            options: [
                {label: '新增单价', value: 2},
                {label: '变更设计', value: 3},
                {label: '废置工程', value: 4},
            ],
            list: [],
            listLoading: false,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            form: {
                type: '',
                sort: 2,
                sortField: 'createTime'
            },
            id: '',
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'typeName',
                        label: '变更类型',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'declarationCode',
                        label: '申报编号',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'applyDate',
                        label: '申请日期',
                        sortable: 'custom',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'approvalDate',
                        label: '审批通过日期',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'declarationBasis',
                        label: '申报依据',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'operatorName',
                        label: '操作人',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'operatorOrgName',
                        label: '所属部门',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'createTime',
                        label: '操作时间',
                        sortable: 'custom',
                        width: '160',
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '120',
                    }
                }
            ])
        }
    },
    created () {
        this.id = this.$route.query.id
        this.getList()
    },
    methods: {
        handleSortChange({ column, prop, order }) {  
            if (prop === 'applyDate') {
                if (order === 'ascending') {  
                    this.form.sort = 2
                } else {
                    this.form.sort = 1
                }
                
                this.form.sortField = 'applyDate'
            }

            if (prop === 'createTime') {
                if (order === 'ascending') {  
                    this.form.sort = 1
                } else {
                    this.form.sort = 2
                }
                
                this.form.sortField = 'createTime'
            }
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .getList({...this.page, ...this.form, projectId: this.id, msType: 2})
                .then((res) => {
                    this.list = (res.list || []).map(item => {
                        const typeName = (this.options.find(m => m.value === Number(item.type)) || {}).label
                        return {
                            ...item,
                            typeName
                        }
                    })
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        handleDetail(type, id) {
            const TypeMap = {
                2: 'ProjectLedgerUnitPriceDetail',
                3: 'ProjectLedgerChangeDesignDetail',
                4: 'ProjectLedgerWasteProjectDetail',
            }
            this.$router.push({
                name: TypeMap[type],
                query: { id }
            })
        },
        handleReset() {
            this.form = {
                type: '',
                sort: 2,
                sortField: 'createTime'
            }
            this.$refs.table.$refs.table.clearSort()
            this.handleFilter()
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
    },
}
</script>

<style lang="scss" scoped>

</style>
